<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_021_组件化注册和使用</title>

</head>
<body>
    <div id="app">
        组件的注册，关键字：component <br />
        <Zujian1></Zujian1>
        <Zujian1></Zujian1>
        <Zujian1></Zujian1>
        <Zujian1></Zujian1>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    //component() 两个参数  参数一：组件的名称  参数二：是一个对象
    //组件名称只能出现首写字母大写，其余的都不能大写，如果使用驼峰式的明明方式，在使用组件的时候，只能在模板中使用组件
        // Vue.component("ZujianName",{ //这是驼峰式组件
        Vue.component("Zujian1",{
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    count:0
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            template:`
                <div>
                    <button @click="method1">
                        您点击了{{count}}次
                    </button>
                    
                </div>
            `,
            methods:{
                method1:function(){
                    this.count++;
                }
            }

        });
        var vm = new Vue({
            el:'#app',
            data:{
                
            }
        });

    </script>
</body>

</html></SCRIPT>